<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Dialogs in JavaScript GTK</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, JavaScript, dialogs, GTK, programming, Linux">
<meta name="description" content="This part of the JavaScript GTK tutorial covers dialogs.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Dialogs</h1>


<p>
In this part of the JavaScript GTK programming tutorial, we will introduce dialogs. 
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* top_horizontal */
google_ad_slot = "3327173442";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
Dialog windows or dialogs are an indispensable part of most modern GUI applications.
A dialog is defined as a conversation between two or more persons. In a computer
application a dialog is a window which is used to "talk" to the application.
A dialog is used to input data, modify data, change the application settings etc.
Dialogs are important means of communication between a user and a computer program.
</p>


<h2>Message boxes</h2>

<p>
Message dialogs are convenient dialogs that provide messages to 
the user of the application.
The message consists of textual and image data. 
</p>

<pre class="code">
#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

This example demonstrates a
Message dialog

author: Jan Bodnar
website: www.zetcode.com
last modified: July 2011
*/

Gtk = imports.gi.Gtk;


Gtk.init(null, null);

Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function ()
    {
        init_ui(this);       
        
        function init_ui(w) {
          
            w.signal.hide.connect(Gtk.main_quit);
            w.set_default_size(250, 200);
            w.set_title("Message dialog");
            w.set_position(Gtk.WindowPosition.CENTER);           
                            
            var fixed = new Gtk.Fixed();
            
            var infoButton = new Gtk.Button.with_label("Information");
            fixed.put(infoButton, 30, 20);

            infoButton.signal.clicked.connect(on_info);            
            
            w.add(fixed);
            w.show_all(); 
        }            
        
        function on_info() {
           
            var md = new Gtk.MessageDialog({modal:true, title:"Information",
                message_type:Gtk.MessageType.INFO,
                buttons:Gtk.ButtonsType.OK, text:"Download completed."});
                
            md.run();
            md.destroy();
        }
    }   
           
});


var window = new Example();
Gtk.main();
</pre>

<p>
We show a button on the window. When we click on the button, an information 
message is displayed. 
</p>

<pre class="explanation">
var infoButton = new Gtk.Button.with_label("Information"); 
</pre>

<p>
This is a button, which will show a dialog, when we click on it.
</p>

<pre class="explanation">
function on_info() {
    
    var md = new Gtk.MessageDialog({modal:true, title:"Information",
        message_type:Gtk.MessageType.INFO,
        buttons:Gtk.ButtonsType.OK, text:"Download completed."});
        
    md.run();
    md.destroy();
}
</pre>

<p>
If we click on the info button, the Information dialog is displayed. 
The <b>Gtk.MessageType.INFO</b> specifies the type of the
dialog. The <b>Gtk.ButtonsType.OK</b> specifies what buttons will be
in the dialog. The last parameter is the message displayed. 
The dialog is displayed with the <b>run()</b> method. 
The programmer must also call either the <b>destroy()</b> or the 
<b>hide()</b> method.
</p>


<img src="/img/gui/jsgtk/info.png" alt="Information message dialog">
<div class="figure">Figure: Message dialog</div>


<h2>AboutDialog</h2>

<p>
The <b>AboutDialog</b> displays information about the application.
It can display a logo, the name of the application, version, copyright, 
website or license information. 
It is also possible to give credits to the authors, documenters, 
translators and artists.
</p>

<pre class="code">
#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

This example demonstrates the
AboutDialog dialog.

author: Jan Bodnar
website: www.zetcode.com
last modified: July 2011
*/

Gtk = imports.gi.Gtk;
GdkPixbuf = imports.gi.GdkPixbuf;

Gtk.init(null, null);

Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function ()
    {
        init_ui(this);
        
        function init_ui(w) {
                            
            w.signal.hide.connect(Gtk.main_quit);
            w.set_default_size(250, 200);
            w.set_title("About dialog");
            w.set_position(Gtk.WindowPosition.CENTER);   
            
            var button = new Gtk.Button.with_label("About");
            button.set_size_request(80, 30);        
            button.signal.clicked.connect(on_clicked);        
            var fix = new Gtk.Fixed();
            fix.put(button, 20, 20);
      
            w.add(fix);        

            w.show_all(); 
        }            
        
        function on_clicked() {
          
            var about = new Gtk.AboutDialog();
            about.set_program_name("Battery");
            about.set_version("0.1");
            about.set_copyright("(c) Jan Bodnar");
            about.set_comments("Battery is a simple tool for battery checking");
            about.set_website("http://www.zetcode.com");
            about.set_logo(new GdkPixbuf.Pixbuf.from_file("battery.png"));
            about.run();
            about.destroy();
    }
    }   
           
});


var window = new Example();
Gtk.main();
</pre>

<p>
The code example uses a <b>AboutDialog</b> with some of its features. 
</p>

<pre class="explanation">
var about = new Gtk.AboutDialog();
</pre>

<p>
We create an instance of the <b>AboutDialog</b>. 
</p>

<pre class="explanation">
about.set_program_name("Battery");
about.set_version("0.1");
about.set_copyright("(c) Jan Bodnar");
</pre>

<p>
Here we specify the name, the version and the copyright of the 
program.
</p>

<pre class="explanation">
about.set_logo(new GdkPixbuf.Pixbuf.from_file("battery.png"));
</pre>

<p>
This line creates a logo. 
</p>

<img src="/img/gui/jsgtk/about.png" alt="AboutDialog">
<div class="figure">Figure: AboutDialog</div>



<h2>FontSelectionDialog</h2>

<p>
The <b>FontSelectionDialog</b> is a dialog for selecting fonts. 
It is typically used in applications, that do some text editing or formatting. 
</p>

<pre class="code">
#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

This example works with the
FontSelectionDialog.

author: Jan Bodnar
website: www.zetcode.com
last modified: July 2011
*/

Gtk = imports.gi.Gtk;
Pango = imports.gi.Pango;

Gtk.init(null, null);



Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function ()
    {

        init_ui(this);
        
        var label;
      
        function init_ui(w) {
      
            w.signal.hide.connect(Gtk.main_quit);
            w.set_default_size(350, 150);
            w.set_title("Font selection");
            w.set_position(Gtk.WindowPosition.CENTER);

            w.set_border_width(10);
            var text = "The only victory over love is flight."
            label = new Gtk.Label.c_new(text);
            var button = new Gtk.Button.with_label("Select font");
            
            button.signal.clicked.connect(on_clicked);

            var fix = new Gtk.Fixed();
            fix.put(button, 100, 30);
            fix.put(label, 30, 90);
            
            w.add(fix);       
            w.show_all();             
        }
            
        function on_clicked() {
          
            var fdia = new Gtk.FontSelectionDialog.c_new("Select font");
            var response = fdia.run();
                  
            if (response == Gtk.ResponseType.OK) {
                var fname = fdia.get_font_name();
                var font_desc = Pango.Font.description_from_string(fname);
                if (font_desc)
                    label.modify_font(font_desc);        
            }
            
            fdia.destroy();
        }       
    }                   
});


var window = new Example();
Gtk.main();
</pre>

<p>
In the code example, we have a button and a label. We show the 
<b>FontSelectionDialog</b> by clicking on the button.
</p>

<pre class="explanation">
var fdia = new Gtk.FontSelectionDialog.c_new("Select font");
</pre>

<p>
We create the <b>FontSelectionDialog</b>.
</p>

<pre class="explanation">
if (response == Gtk.ResponseType.OK) {
    var fname = fdia.get_font_name();
    var font_desc = Pango.Font.description_from_string(fname);
    if (font_desc)
        label.modify_font(font_desc);        
}
</pre>

<p>
If we click on the OK button, the font of the label widget changes to the
one, that we selected in the dialog. 
</p>

<img src="/img/gui/jsgtk/fontdialog.png" alt="FontSelectionDialog">
<div class="figure">Figure: FontSelectionDialog </div>


<p>
In this part of the JavaScript GTK tutorial, we presented dialogs. 
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified July 31, 2011  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

